<apes-content>

  <!-- 定制版组件样式 -->
  <apes-card apesTitle="定制版组件样式" class="customize-main">

    <!-- steps（客服总控定制版）样式 -->
    <fieldset>
      <legend style="color:#fff">steps（客服总控定制版）</legend>

      <!-- 洗车类 -->
      <div style="height: 150px; padding: 20px;" *ngFor="let step of steps01">
        <apes-steps [apesCurrent]="step.current"
                    [apesStatus]="step.status"
                    class="customer-service">
          <apes-step *ngFor="let item of step.items"
                     [apesStatus]="item.status"
                     [apesTitle]="item.title"
                     [apesDescription]="item.Description"
                     [apesType]="item.type"
                     [apesIcon]="item.icon" ></apes-step>
        </apes-steps>
      </div>

      <!-- 服务类 -->
      <div style="height: 150px; padding: 20px;" *ngFor="let step of steps02">
        <apes-steps [apesCurrent]="step.current"
                    [apesStatus]="step.status"
                    class="customer-service">
          <apes-step *ngFor="let item of step.items"
                     [apesStatus]="item.status"
                     [apesTitle]="item.title"
                     [apesDescription]="item.Description"
                     [apesType]="item.type"
                     [apesIcon]="item.icon" ></apes-step>
        </apes-steps>
      </div>

      <!-- 外修类 -->
      <div style="height: 150px; padding: 20px;" *ngFor="let step of steps03">
        <apes-steps [apesCurrent]="step.current"
                    [apesStatus]="step.status"
                    class="customer-service">
          <apes-step *ngFor="let item of step.items"
                     [apesStatus]="item.status"
                     [apesTitle]="item.title"
                     [apesDescription]="item.Description"
                     [apesType]="item.type"
                     [apesIcon]="item.icon" ></apes-step>
        </apes-steps>
      </div>

      <!-- 产品类 -->
      <div style="height: 150px; padding: 20px;" *ngFor="let step of steps04">
        <apes-steps [apesCurrent]="step.current"
                    [apesStatus]="step.status"
                    class="customer-service">
          <apes-step *ngFor="let item of step.items"
                     [apesStatus]="item.status"
                     [apesTitle]="item.title"
                     [apesDescription]="item.Description"
                     [apesType]="item.type"
                     [apesIcon]="item.icon" ></apes-step>
        </apes-steps>
      </div>

      <!-- 产品类 -->
      <div style="height: 150px; padding: 20px;" *ngFor="let step of steps05">
        <apes-steps [apesCurrent]="step.current"
                    [apesStatus]="step.status"
                    class="customer-service">
          <apes-step *ngFor="let item of step.items"
                     [apesStatus]="item.status"
                     [apesTitle]="item.title"
                     [apesDescription]="item.Description"
                     [apesType]="item.type"
                     [apesIcon]="item.icon" ></apes-step>
        </apes-steps>
      </div>

      <!-- 新版多行客服 -->
      <div style="height: 150px; padding: 20px;" *ngFor="let step of steps07">
        <apes-steps class="customer-service">
          <apes-step *ngFor="let item of step.items"
                     [apesStatus]="item.status"
                     [apesTitle]="item.title"
                     [apesDescription]="item.Description"
                     [apesType]="item.type"
                     [apesIcon]="item.icon" ></apes-step>
        </apes-steps>
      </div>

    </fieldset>

    <!-- steps（车辆总控定制版）样式 -->
    <fieldset>
      <legend style="color:#fff">steps（车辆总控定制版）</legend>

      <div style="height: 150px; padding: 20px;" *ngFor="let step of steps06">
        <apes-steps [apesStatus]="step.status"
                    class="customer-car">
          <apes-step *ngFor="let item of step.items"
                     [apesStatus]="item.status"
                     [apesTitle]="item.title"
                     [apesDescription]="item.Description"
                     [apesType]="item.type"></apes-step>
        </apes-steps>
      </div>

    </fieldset>

    <!-- progress（客服总控定制版）样式 -->
    <fieldset>
      <legend style="color:#fff">progress（客服总控定制版）</legend>

      <div class="customize-progress-circle">
        <apes-progress [apesPercent]="nums.num"
                       apesType="circle"
                       [apesFormat]="format"
                       apesGradient="theme01"
                       [apesWidth]="200"
                       class="customer-service"></apes-progress>
        <span class="customize-main-title">昨天评价率</span>
      </div>
      <div></div>

      <br>

      <div class="customize-progress-dashboard">
        <apes-progress [apesPercent]="nums.num"
                       apesType="dashboard"
                       [apesFormat]="format"
                       apesGradient="theme02"
                       [apesWidth]="200"
                       class="customer-service"></apes-progress>
        <span class="customize-main-title">昨天客诉率</span>
      </div>

    </fieldset>

  </apes-card>

</apes-content>
